@import 'common.scss';


%detail-container{

  .detail-container__left{


    .article-container{
      width:938*$length;
      padding:35*$length 24*$length;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 4*$length;
      overflow: hidden;
      .article__header{
        @extend %flex-row-spb;
        .header-info{
          width:100%;
          @extend %flex-column-spb;
          align-items:flex-start;
          .title{

            @extend %flex-row-spb;
            justify-content: flex-start;
            @include fontStyle(24,28,500,#222,left);
            height:auto;

            .solved{
              @include fontStyle(14,19,500,#222,left);
              height:auto;
              margin-left:20*$length;
              padding:3*$length 5*$length;
              background-color:
                #e7faf0;
              border: 1px solid
              #d0f5e0;
              color:
                #13ce66;
              border-radius: 4*$length;
            }

            .unsolved{
              @include fontStyle(14,19,500,#222,left);
              height:auto;
              margin-left:20*$length;
              padding:3*$length 5*$length;
              background-color:#f4f4f5;
              border:1px solid #e9e9eb;
              color:#909399;
              border-radius: 4*$length;
            }
          }

          .infos{
            margin-top: 13*$length;
            @extend %flex-row-spb;
            width:100%;
            .info-left{
              @extend %flex-row-spb;
              justify-content: flex-start;
              flex: 1;
              > .icon-box{
                margin-right:15*$length;
                @extend %flex-row-spb;
                justify-content: flex-start;
                > .icon{
                  margin-right:10*$length;
                  width:20*$length;
                  height:20*$length;
                  border-radius:2*$length;
                  @extend %flex-column-center;
                  background-color: #FF7474;
                }
              }
              > .label-box{
                flex-wrap: wrap;
                margin-left:5*$length;
                @extend %flex-row-spb;
                justify-content: flex-start;
                > p{
                  margin-bottom: 8*$length;
                  margin-right:10*$length;
                  padding:2*$length 8*$length;
                  background-color: #F4F8FA;
                  @include fontStyle(12,16,500,#999,center);
                  @extend %animate-transition;
                  @extend %cursorPointer;

                  &:hover{
                    background-color:rgba(0,170,230,.2);
                    color:rgba(0,170,230,1);
                  }
                }
              }
            }

            .info-right{
              @extend %flex-row-spb;
              flex-shrink: 0;

              .left{
                @include fontStyle(12,16,500,#999,left);
                > span{
                  margin: 0 3*$length;
                }
              }

              .right{
                margin-left: 38*$length;
                @extend %flex-row-spb;
                justify-content: flex-start;
                .icon-box{
                  @extend %inlineBlockV;
                  margin-right: 17*$length;
                  > span{
                    @include fontStyle(14,19,500,#ccc,left);
                    margin-left:5*$length;
                    vertical-align: top;

                  }

                }
              }

            }

          }

        }

      }
      .article__introduce{
        @include fontStyle(14,24,500,#666,left);
        height:auto;
        box-sizing: border-box;
        padding:14*$length 14*$length;
        margin-top:32*$length;
        background-color: #F4F8FA;
        border-radius: 4*$length;
      }


      .article__content{
        @extend %article-content;
      }

      .article__like1{
        margin:60*$length auto 30*$length;
        width:66*$length;
        height:64*$length;
        position: relative;
        @extend %cursorPointer;
        @extend %flex-column-center;
        &:hover{
          .egg{
            color:#FF7474;
          }
          .heart{
            color:#fff;
          }
          .num{
            color:#fff;
          }
        }
        .egg{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          font-size: 62*$length;
          color:#EFEFEF;
          padding-bottom: 16*$length;
          @extend %animate-transition;
          z-index: 100;
        }
        .heart{
          position: relative;

          font-size: 18*$length;
          color:#CCCCCC;
          @extend %animate-transition;
          z-index: 101;

        }
        .num{
          position: relative;

          @include fontStyle(12,19,500,#999,center);
          width:100%;
          @extend %animate-transition;
          z-index: 101;

        }

      }
      .article__like2{
        margin:60*$length auto 30*$length;
        width:66*$length;
        height:64*$length;
        position: relative;
        @extend %cursorPointer;
        @extend %flex-column-center;
        &:hover{
          .egg{
            color:#FF7474;
          }
          .heart{
            color:#fff;
          }
          .num{
            color:#fff;
          }
        }
        .egg{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          font-size: 62*$length;
          color:#FF7474;
          padding-bottom: 16*$length;
          @extend %animate-transition;
          z-index: 100;
        }
        .heart{
          position: relative;

          font-size: 18*$length;
          color:#fff;
          @extend %animate-transition;
          z-index: 101;

        }
        .num{
          position: relative;

          @include fontStyle(12,19,500,#fff,center);
          width:100%;
          @extend %animate-transition;
          z-index: 101;

        }

      }

      .article__praise-member{
        width:652*$length;
        margin:20*$length auto;
        @extend %flex-row-spb;
        justify-content: flex-start;
        flex-wrap: wrap;

        .more-member{
          margin-bottom: 28*$length;
          width:40*$length;
          height:40*$length;
          background-color: #00AAE6;
          border-radius:50%;
          @include fontStyle(12,40,500,#fff,center);
          @extend %cursorPointer;
          @extend %animate-transition;
          &:hover {
            transform: scale(1.2);
            filter:brightness(110%);
          }
          @keyframes more-member__hover{
            0%{
              transform: scale(1);
            }
            50%{
              transform: scale(1.1);
            }
            100%{
              transform: scale(1);
            }
          }
        }

      }

      .article__footer{
        height:34*$length;
        width:100%;
        position:relative;
        @extend %flex-row-spb;
        .link{
          @include fontStyle(12,34,500,#666,left);
          a{
            &:hover{
              color:#00AAE6
            }
          }
        }
        .report{
          @extend %cursorPointer;
          @include fontStyle(12,34,500,#999,left);
          &:hover{
            color:#00AAE6
          }
        }

        .project{
          position:absolute;
          left:0;
          right:0;
          width:332*$length;
          margin:0 auto;
          @extend %flex-row-spb;

          p{
            width: 100*$length;
            height:34*$length;
            border-radius: 4*$length;
            background-color: #00AAE6;
            @extend %cursorPointer;
            @extend %animate-transition;
            @include fontStyle(14,34,500,#fff,center);
            a{
              color:#fff
            }
            &:hover{
              filter:brightness(1.1);
            }
          }
        }
      }



    }

    .article-comment{
      width:938*$length;
      padding:18*$length 24*$length;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 4*$length;
      overflow: hidden;
      margin-top: 16*$length;

      .release-area{
        width:890*$length;
        padding:14*$length 16*$length;
        background-color: #F4F8FA;
        border:1px solid #EFEFEF;
        border-radius:4*$length;
        @include fontStyle(12,22,500,#666666,left);
        height:66*$length;

      }

      .button-box{
        height:34*$length;
        @extend %flex-row-spb;
        justify-content: flex-end;
        margin-top: 16*$length;
        p{
          width:100*$length;
          background-color: #00AAE6;
          border-radius: 4*$length;
          @include fontStyle(12,34,500,#fff,center);
          @extend %cursorPointer;
          @extend %animate-transition;
          &:hover{
            filter: brightness(110%);
          }


        }

      }
      .comments-header{
        padding-top: 16*$length;
        margin-top: 24*$length;
        border-top: 1px solid #EFEFEF;
        @extend %flex-row-spb;

        .left{
          @include fontStyle(12,16,500,#A7A7A7,left);
          span{
            margin-right: 8*$length;
          }
        }

        .right{
          @extend %flex-row-spb;
          p{
            @include fontStyle(12,16,500,#A7A7A7,left);
            margin-left:20*$length;
            @extend %cursorPointer;
            &:hover{
              color:#000;
            }

          }

        }
      }





    }



  }

  .detail-container__right{
    width:302*$length;
    .right__hot-item{
      padding:8*$length 16*$length;
      width:302*$length;
      height:64*$length;
      box-sizing: border-box;
      @extend %cursorPointer;
      @extend %flex-row-spb;

      justify-content: flex-start;
      &:hover{
        .right__hot-item__content{
          p{
            color: rgba(0,170,230,1)
          }
          h6{
            color: rgba(0,170,230,.8)

          }
        }
      }
      .right__hot-item__content{
        margin-left:10*$length;
        width:210*$length;
        p{
          @include fontStyle(14,19,500,#2F2F2F,left);
          @extend %nowrap;
          @extend %animate-transition;
        }
        h6{
          margin-top:10*$length;
          @include fontStyle(12,16,500,#999999,left);
          @extend %nowrap;
          @extend %animate-transition;

        }
      }
      .right__hot-item__cover{
        width:48*$length;
        height:48*$length;
        border-radius: 4*$length;
        @extend %flex-row-center;
        img{
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }

  .article-option{
    position:fixed;
    top:50%;
    left:calc((100% - 1256px)/2 - 56px);
    height:356*$length;
    width:40*$length;
    margin-top:-178*$length;
    @extend %flex-column-spb;

    .option-item{
      width:40*$length;
      height:40*$length;
      border-radius: 4*$length;
      background-color: #fff;
      @extend %cursorPointer;
      @extend %flex-row-center;
      i{
        @extend %animate-transition;

        color:#CCCCCC;
        font-size: 12px;
      }
      .likeActive{
        color:#FF7474
      }
      &:hover{

        .star{
          color:#F8A06F
        }
        .like{
          color:#FF7474
        }
        .comment{
          color:#59CBF4
        }
      }

      embed{
        @extend %cursorPointer;

        filter:grayscale(0%);
        @extend %animate-transition;
        &:hover{
          filter:grayscale(0%);
        }
      }
      .star{
        &:hover{
          color:#F8A06F

        }
      }
      .like{
        &:hover{
          color:#FF7474

        }
      }
      .comment{
        &:hover{
          color:#59CBF4

        }
      }
    }
    .share-word{
      @include fontStyle(12,16,500,#B4B4B4,center)
    }
  }

  .hljs-ln{
    tr{
      border:none;

      td{
        background-color: #fcfcfc;
        border:none;
        .hljs-ln-numbers {
          text-align: center;
          color: #ccc;
          border-right: 1px solid #999;
          vertical-align: top;
          padding-right: 5px;

          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        .hljs-ln-code {
          padding-left: 10px;
        }

        /* .hljs-ln-code,
        .hljs-ln-numbers {
          line-height: 14px;
        } */

        code {
          white-space: pre-wrap;
          overflow: auto;
        }
      }
    }


  }

}
